<template>
  <div style="width: 100%; height: 325px" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { getCMDTrend } from '@/api/dashboard'

export default {
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.init({
      timeUnit: 'Day',
      timeRange: 15
    })
  },
  computed: {},
  methods: {
    init(params) {
      // stock device trend
      getCMDTrend(params).then((res) => {
        this.initChart(res)
      }).catch((err) => {
          this.$confirmError(err)
        })
    },
    initChart(data) {
      this.chart = echarts.init(this.$el)

      const option = {
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          show: true,
          data: data.xaxisData
        },
        yAxis: {
          type: 'value',
          show: true,
          minInterval: 1
        },
        grid: {
          x: 50,
          y: 50,
          x2: 50,
          y2: 50
        },
        series: [
          {
            name: 'Command',
            type: 'bar',
            symbol: 'none',
            barWidth: '20%',
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                color: '#377DFF'
              }
            },

            showSymbol: false,

            data: data.yaxisData
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style>
</style>
